<template>
  <div class="main">
    <!-- 进度条 -->
    <div class="process" v-if="pos < 100">
      <div class="bottom">
        <i class="el-icon-back"></i>
        <div class="back" @click="backToIndex()">返回首页</div>
      </div>
      <div style="width:80%">
        <el-progress :percentage="pos * 12"></el-progress>
      </div>
    </div>

    <!-- 介绍页面 -->
    <div class="introduce" v-if="pos == 0">
      <ass-begin></ass-begin>
      <div class="btn">
        <el-button type="primary" @click="nextAss" round>开始测评</el-button>
      </div>
    </div>

    <!-- 信息收集页面 -->
    <div class="info-collect" v-if="pos == 1">
      <info-collection ref="infoCollection" @nextAss="nextAss"></info-collection>
    </div>

    <!-- 创造力测评,NLP -->
    <div v-else-if="pos == 2">
      <ass-creative @nextAss="nextAss" />
    </div>

    <!-- 火柴，逻辑测试 -->
    <div v-else-if="pos == 3">
      <ass-match @nextAss="nextAss" />
    </div>

    <!-- 汉诺塔(感觉还是留在这儿凑数吧) -->
    <div v-else-if="pos == 4">
      <ass-hanoi @nextAss="nextAss" />
    </div>

    <!-- 投资 -->
    <div v-else-if="pos == 5">
      <ass-adventure @nextAss="nextAss" />
    </div>

    <!-- 选项 找规律 -->
    <div v-else-if="pos == 6">
      <ass-raven @nextAss="nextAss" />
    </div>

    <!-- 密室 -->
    <div v-else-if="pos==7">
      <ass-room @nextAss="nextAss" />
    </div>

    <!-- 逻辑推理 -->
    <div v-else-if="pos==8">
      <ass-logic @nextAss="nextAss"/>
    </div>

    <!-- 结果 -->
    <div v-else-if="pos == 100">
      <result ref="theend"></result>
    </div>
  </div>
</template>

<script>
import assBegin from "./begin.vue";
import infoCollection from "./infocollection.vue";  // 收集信息
import assCreative from "./creative/index.vue"; // 创造力，10个单词的语义相关性
import assMatch from './match/index.vue'; // 火柴
import assAdventure from './Adventure/index.vue'; // 投资
import assRaven from './raven/index.vue'; // 图形找规律
import assHanoi from './hanoi/index.vue'; // 汉诺塔
import assRoom from './room/index.vue'; // 密室
import assLogic from './Logic/index.vue' // 谁在说谎
import result from "./result/results.vue";  // 结果显示

import {FinalScore} from './../../api/access';

export default {
  name: "evaluation",
  data: function () {
    return {
      pos: 0, //控制显示开始页, 结果页，收集信息页和具体题目页
      haslogin: null,
    };
  },
  components: {
    assBegin,infoCollection,assCreative,result,
    assAdventure,assHanoi,assMatch,assRaven,assRoom,assLogic,
  },
  methods: {
    backToIndex: function () {
      this.$router.back();
    },
    open1: function (msg, type) {
      this.$message({
        showClose: true,
        message: msg,
        type: type,
      });
    },

    nextAss: function () {
      if (this.pos == 0 && this.haslogin == false) {
        this.open1(
          "您尚未登录，不能进行测评,1s后系统将自动跳转到登录页面",
          "error"
        );
        setTimeout(() => {
          this.$router.push({ path: "/userlogin" });
        }, 1000);
      } else {
        this.pos = this.pos + 1;
        if (this.pos == 9) {   
          // this.$message('结束');
          // this.$refs.theend.postCalc();
          FinalScore({
            uid: this.$store.state.User.uid
          }).then(res=>{
            if(res.rescode==200){
              this.pos = 100;
            }
          })
        }
      }
    },
  },
  mounted: function () {
    this.haslogin = this.$store.state.User.haslogin;
  }
};
</script>

<style scoped lang='less'>
* {
  box-sizing: border-box;
}

.main {
  width: 100%;
  height: 100%;
}

.process {
  width: 80%;
  margin: 0 auto;
  display: flex;
  padding: 10px 5px;
}

.info-collect {
  width: 100%;
}

.bottom {
  display: flex;
  text-align: center;
}

.el-icon-back {
  font-size: 1.4em;
  font-weight: bold;
  padding-top: 2px;
  padding-left: 10px;
}

.el-button {
  margin-bottom: 100px;
}

.back {
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  padding-bottom: 5px;
}
</style>
